<!--包房详情 -->
<template>
  <div class="admin-body">
    <el-row>
      <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/kTVShop' }"><span style="color: #409eff;padding: 0 10px 0 10px">{{thisData.name}}</span></el-breadcrumb-item>
        <el-breadcrumb-item>包房详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row style="padding: 15px">
      <el-row class="main">
        <el-row  style="min-height: 40px">
          <el-col  style="margin-bottom: 5px;display: flex" align="left">
            <el-select style="" v-model="key" clearable  @change="getstartSelect()" placeholder="请选择包房类型查询">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span style="line-height: 32px;text-align: right;flex: 1">中小包：24个 大包：12个 豪包：12个</span>
          </el-col>
        </el-row>
        <!--表格-->
        <el-table
          select-on-indeterminate
          ref="multipleTable"
          border
          align="left"
          :data="tableData">
          <el-table-column
            type="index"
            label="序号"
            width="50">
          </el-table-column>
          <el-table-column
            prop="room_name"
            label="包房名称">
          </el-table-column>
          <el-table-column
            prop="type"
            label="包房类型">
            <template slot-scope="scope">
              <span :style="{}">{{pdlx(scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="包房数量">
          </el-table-column>
          <el-table-column
            prop="addtime"
            label="创建时间">
            <template slot-scope="scope">
              {{formatDate(scope.row.addtime)}}
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-row style="margin-top: 20px">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" align="right">
            <el-pagination
              style="text-align: right;margin-bottom:70px;"
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="dataTotal">
            </el-pagination>
          </el-col>
        </el-row>
      </el-row>
    </el-row>
    <!--获取积分记录2-->
    <el-dialog title="添加" :visible.sync="addVisible" width="80%" :modal-append-to-body="false">

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" >确 定</el-button>
        <el-button >取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "PrivateRoomDetail",
    activated() {
      if (!this.$store.state.login.in) {
        this.$router.push({name: "login", params: {userId: 123}})
      }
      this.thisData = this.$store.state.login.ktvShopData
      this.getstart()
    },
    data() {
      return {
        pageSize: 10,
        page: 1,
        dataTotal: 0,
        key:'',
        type:'',
        options: [
          {
            value: '1',
            label: '中小包'
          },
          {
            value: '2',
            label: '大包'
          },
          {
            value: '3',
            label: '豪包'
          },
        ],
        tableData:[],
        thisData:[],
        addVisible:false,

      }
    },
    methods: {
      pdlx(type){
        let dateArr = ['小包','中小包','大包','豪包',];
        return dateArr[type]
      },
      pdlx2(type){
        let dateArr = ['上午场','下午场','黄金场','午夜场',];
        return dateArr[type]
      },
      test(){
        let thi = this
        console.log(thi.oneValue)
        console.log(thi.oneValue.children)
      },
      oneChange(){
        this.page = 1
        this.area = this.oneValue.label
        console.log(this.area)
        this.getstart()
      },
      twoChange(){
        this.page = 1
        this.area = this.oneValue.label + '-' + this.twoValue.label
        console.log(this.area)
        this.getstart()
      },
      threeChange(){
        this.page = 1
        this.area = this.oneValue.label + '-' + this.twoValue.label + '-' + this.threeValue.label
        console.log(this.area)
        this.getstart()
      },
      deSelect(){
        this.oneValue = ''
        this.twoValue = ''
        this.threeValue = ''
        this.area = ''
        this.getstart()
      },
      seeData(id,state){
        this.member_id = id
        if (state == 1) {
          this.getstart1()
        }else {
          this.getstart2()
        }
      },
      //查询邀请会员人数，分页
      getstart1() {
        let thi = this
        const prams = {
          page:thi.page1,
          pageSize:thi.pageSize1,
          member_id:thi.member_id,
        }
        thi.mySelectAll('refferList',prams).then(function (value) {
          if (value.code == 200){
            thi.memberVisible = true
            thi.tableData1 = value.data
            thi.dataTotal1 = value.Total
          }

        })
      },
      //查询获取积分记录，分页
      getstart2() {
        let thi = this
        const prams = {
          page:thi.page2,
          pageSize:thi.pageSize2,
          member_id:thi.member_id,
        }
        thi.mySelectAll('recordList',prams).then(function (value) {
          if (value.code == 200){
            thi.integralVisible = true
            thi.tableData2 = value.data.list
            thi.dataTotal2 = value.Total
          }

        })
      },
      //选择展示数量
      handleSizeChange1(val) {
        this.pageSize1 = val
        this.getstart1()
      },
      //分页
      handleCurrentChange1(val) {
        this.page1 = val
        this.getstart1()
      },

      //选择展示数量
      handleSizeChange2(val) {
        this.pageSize2 = val
        this.getstart2()
      },
      //分页
      handleCurrentChange2(val) {
        this.page2 = val
        this.getstart2()
      },
      add(){
        this.$router.push({name:'addGoods'})
      },
      getstartSelect(){
        this.page = 1
        this.getstart()
      },
      //绑定表格数据，分页
      getstart() {
        let thi = this
        const prams = {
          page:thi.page,
          pageSize:thi.pageSize,
          shop_id:thi.thisData.shop_id,
          key:thi.key,
        }
        thi.mySelectAll('roomDetails',prams).then(function (value) {
          thi.tableData = value.data
          thi.dataTotal = value.Total
        })
      },
      Export(){
        let thi = this
        if (thi.tableData !== ''){

          thi.excelClick++
          thi.excelName='积分卡管理表'
          thi.tableDataId='#tableDataExport'
        }
      },
      //选择展示数量
      handleSizeChange(val) {
        this.pageSize = val
        this.getstart()
      },
      //分页
      handleCurrentChange(val) {
        this.page = val
        this.getstart()
      },
      //状态改变提示
      changeMes(id, state) {
        var heeh = '该'
        var caozuo = '禁用'
        if (id.length > 1) {
          heeh = '这些'
        }
        if (state == 0) {
          caozuo = '删除'
        }
        let thi = this
        thi.$confirm('此操作将'+caozuo + heeh+'会员', '是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          thi.deleteMember(id,state)
        }).catch(() => {
          thi.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      deleteMember(id,state) {
        let thi = this
        const por = {
          id: id,
          state: state,
        }
        thi.mySubmit('memberStateChange', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
      submitState(id,state) {
        let thi = this
        const por = {
          id: id,
          admin_state: state,
        }
        thi.mySubmit('stateChange', por).then(function (code) {
          if (code == 200) {
            thi.getstart()
          }
        })
      },
    }
  }

</script>

<style scoped>
  .main {
    background-color: white;
    min-height: 500px;
    padding: 10px;
    border: #EDEDED 1px solid;
    border-radius: 5px;
  }
  .el-row{
    /*防止页面抖动*/
    width: calc(100% - 2px) !important;
  }
  select{
    border:none;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
  }
  /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
  select::-ms-expand {
    display: none;
  }

  .txtCont {
    border: 1px solid #409eff;
    display: flex;
    align-items: center;
    border-radius: 5px;
    height: 40px;
    margin-bottom: 20px;
    width: 480px;
    float: left;
  }

  .slect-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;;
  }
</style>
